<template>
  <div class="home-layout">
    <div class="main-content">
      <div class="category-bar">
        <span
          :class="['category-item', { active: selectedCategory === null }]"
          @click="selectCategory(null)"
        >全部</span>
        <span
          v-for="cat in categories"
          :key="cat.id"
          :class="['category-item', { active: selectedCategory === cat.id }]"
          @click="selectCategory(cat.id)"
        >{{ cat.name }}</span>
      </div>
      <div v-if="loading" class="loading">加载中...</div>
      <div v-else-if="articles.length === 0" class="empty">暂无文章</div>
      <div v-else class="article-list">
        <div
          v-for="article in articles"
          :key="article.id"
          class="article-card"
          @click="goDetail(article.id)"
        >
          <h3 class="article-title">{{ article.title }}</h3>
          <div class="article-summary">{{ article.summary }}</div>
          <div class="article-meta">
            <span>作者：{{ article.username }}</span>
            <span>发布时间：{{ article.created_at }}</span>
          </div>
          <div class="article-stats">
            <span>阅读 {{ article.views }}</span>
            <span>点赞 {{ article.likes }}</span>
            <span>评论 {{ article.comments_count }}</span>
          </div>
        </div>
      </div>
    </div>
    <aside class="sidebar">
      <h2>热门文章</h2>
      <ul class="hot-list">
        <li
          v-for="hot in hotArticles"
          :key="hot.id"
          class="hot-item"
          @click="goDetail(hot.id)"
        >{{ hot.title }}</li>
      </ul>
      <h2 style="margin-top:28px;">阅读量排行</h2>
      <ul class="hot-list">
        <li
          v-for="rank in viewRankArticles"
          :key="rank.id"
          class="hot-item view-rank-item"
          @click="goDetail(rank.id)"
        >
          <span class="rank-title">{{ rank.title }}</span>
          <span class="rank-views">{{ rank.views }}次</span>
        </li>
      </ul>
    </aside>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: '前端开发' },
        { id: 2, name: '后端开发' },
        { id: 3, name: '生活' },
        { id: 4, name: '旅行' },
        { id: 5, name: '摄影' },
        { id: 6, name: '美食' },
      ],
      hotArticles: [
        { id: 3, title: '云南旅行日记' },
        { id: 5, title: '家常美食分享' },
        { id: 1, title: 'Vue3 组合式 API 实战' },
        { id: 6, title: '摄影入门指南' },
      ],
      viewRankArticles: [],
      articles: [],
      selectedCategory: null,
      loading: false,
      allArticles: [
        {
          id: 1,
          title: 'Vue3 组合式 API 实战',
          summary: '深入理解 Vue3 组合式 API 的用法与优势，提升组件复用性。',
          username: '小明',
          created_at: '2024-05-01',
          views: 1234,
          likes: 56,
          comments_count: 12,
          categoryId: 1
        },
        {
          id: 2,
          title: 'Node.js 性能优化技巧',
          summary: '掌握 Node.js 性能调优的关键点，让你的服务飞起来。',
          username: '后端老王',
          created_at: '2024-04-28',
          views: 980,
          likes: 34,
          comments_count: 8,
          categoryId: 2
        },
        {
          id: 3,
          title: '云南旅行日记',
          summary: '记录一次说走就走的云南之旅，风景与美食的盛宴。',
          username: '小红',
          created_at: '2024-04-20',
          views: 2100,
          likes: 88,
          comments_count: 23,
          categoryId: 4
        },
        {
          id: 4,
          title: 'React Hooks 最佳实践',
          summary: 'React Hooks 的高阶用法与项目实战经验分享。',
          username: '前端小李',
          created_at: '2024-04-15',
          views: 800,
          likes: 22,
          comments_count: 5,
          categoryId: 1
        },
        {
          id: 5,
          title: '家常美食分享',
          summary: '简单又美味的家常菜做法，快来试试吧！',
          username: '美食家',
          created_at: '2024-04-10',
          views: 1500,
          likes: 60,
          comments_count: 18,
          categoryId: 6
        },
        {
          id: 6,
          title: '摄影入门指南',
          summary: '新手如何快速入门摄影，拍出好照片的技巧。',
          username: '摄影师阿强',
          created_at: '2024-03-30',
          views: 1100,
          likes: 40,
          comments_count: 10,
          categoryId: 5
        },
        {
          id: 7,
          title: '后端架构设计思路',
          summary: '大型系统后端架构的设计原则与实战案例。',
          username: '架构师',
          created_at: '2024-03-25',
          views: 900,
          likes: 30,
          comments_count: 7,
          categoryId: 2
        },
        {
          id: 8,
          title: '生活中的时间管理',
          summary: '高效时间管理方法，助你工作生活两不误。',
          username: '小美',
          created_at: '2024-03-20',
          views: 700,
          likes: 18,
          comments_count: 3,
          categoryId: 3
        }
      ]
    }
  },
  methods: {
    fetchArticles() {
      this.loading = true
      setTimeout(() => {
        if (this.selectedCategory) {
          this.articles = this.allArticles.filter(a => a.categoryId === this.selectedCategory)
        } else {
          this.articles = this.allArticles
        }
        this.loading = false
      }, 300)
    },
    selectCategory(catId) {
      this.selectedCategory = catId
      this.fetchArticles()
    },
    goDetail(id) {
      this.$router.push(`/article/${id}`)
    }
  },
  mounted() {
    this.fetchArticles()
    // 初始化阅读量排行
    this.viewRankArticles = this.allArticles
      .slice()
      .sort((a, b) => b.views - a.views)
      .slice(0, 4)
  }
}
</script>

<style scoped>
.home-layout {
  display: flex;
  gap: 32px;
}
.main-content {
  flex: 1;
}
.category-bar {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}
.category-item {
  background: #f0f5ff;
  color: #1890ff;
  padding: 6px 18px;
  border-radius: 16px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.category-item.active {
  background: #42b983;
  color: #fff;
}
.category-item:hover {
  background: #e6f7ff;
}
.article-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.article-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 20px 24px;
  transition: box-shadow 0.2s, border 0.2s;
  border: 1px solid #f0f0f0;
  cursor: pointer;
}
.article-card:hover {
  box-shadow: 0 4px 24px rgba(66,185,131,0.08);
  border-color: #42b98333;
}
.article-title {
  margin: 0 0 8px 0;
  color: #222;
  font-size: 1.25rem;
  font-weight: bold;
}
.article-summary {
  color: #666;
  margin-bottom: 10px;
  font-size: 1rem;
}
.article-meta {
  font-size: 13px;
  color: #999;
  margin-bottom: 6px;
  display: flex;
  gap: 16px;
}
.article-stats {
  font-size: 13px;
  color: #aaa;
  display: flex;
  gap: 16px;
}
.sidebar {
  width: 220px;
  background: #fafbfc;
  border-radius: 10px;
  padding: 18px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  border: 1px solid #f0f0f0;
  height: fit-content;
}
.hot-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hot-item {
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
  color: #1890ff;
  cursor: pointer;
  transition: color 0.2s;
}
.hot-item:hover {
  color: #42b983;
}
.loading, .empty {
  text-align: center;
  color: #aaa;
  margin: 32px 0;
  font-size: 1.1rem;
  letter-spacing: 1px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .home-layout { flex-direction: column; }
  .sidebar { width: 100%; margin-top: 24px; }
}
/* 阅读量排行样式优化 */
.view-rank-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.rank-title {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.rank-views {
  color: #aaa;
  font-size: 13px;
  flex-shrink: 0;
  margin-left: 8px;
}
</style> 